<template>
  <div>
    <div class="banner">
      <img :src="require('../assets/images/bg_bmxz.png')" alt="" />
    </div>
    <div class="content inner">
      <div class="notice-box">
        <h3 class="notice-title">报名须知</h3>
        <div class="notice-main" v-html="projectInfos.regAgreement"></div>
      </div>
    </div>
    <div class="notice-ft">
      <van-button
        type="primary"
        block
        :disabled="!isChecked"
        :class="{ disabled: !isChecked }"
        @click="goPlatform"
        >我已阅读并同意报名须知
        <span v-if="!isChecked">( {{ time }}s )</span></van-button
      >
    </div>
  </div>
</template>
<script>
import localDb from "../utils/localDb.js";
import { formatDate } from "../utils/util";
import { getSysZt } from "../utils/api";
export default {
  data() {
    return {
      isChecked: false,
      time: 0,
      times: null,
    };
  },
  created() {
    this.$store.commit("SETUSER", "");
  },
  methods: {
    goPlatform() {
      this.$router.push({ path: "/zmkm" });
    },
    formatDateTime(fmt, mydate) {
      return formatDate(fmt, mydate);
    },
    countDown() {
      this.time--;
    },
    async getSysZt() {
      try {
        const data = await getSysZt();
        if (data.res == 0) {
          localDb.set("emptyEnter", data.data);
          if (data.data.isMt != "0") {
            this.$router.push({ path: "/empty" });
          }
        }
      } catch (error) {}
    },
  },
  computed: {
    projectInfos() {
      return this.$store.state.frontPage.projectInfos;
    },
  },
  created() {
    this.getSysZt();
  },
  mounted() {
    this.time = this.projectInfos.regWait;
    this.times = setInterval(this.countDown, 1000);
  },
  watch: {
    time: function (newVal, oldVal) {
      if (newVal == 0) {
        this.isChecked = true;
        clearInterval(this.times);
      }
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.banner {
  font-size: 0;
  img {
    width: 100%;
  }
}
.content {
  .notice-box {
    padding: 14px 0 30px;
    background: #fff;
    text-align: left;
    .notice-main {
      margin-top: 30px;
      font-size: 30px;
      line-height: 54px;
      color: #222;
      text-align: justify;
      /deep/ p {
        b {
          font-family: PingFangSC-Semibold;
          color: #000;
        }
      }
      .title {
        margin-bottom: 18px;
        font-size: 32px;
        color: #333;
        font-weight: bold;
      }
    }
  }
}
.notice-ft {
  // position: fixed;
  // left: 0;
  // bottom: 0;
  width: 100%;
  height: 90px;
  font-size: 36px;
  .van-button {
    background: #0195ff;
    border: #0195ff;
    &.disabled {
      background: #ccc;
    }
  }
}
</style>
<style lang="scss">
.notice-ft .van-button {
  height: 90px;
  font-size: 36px;
  background-color: #ccc;
  border: none;
}
</style>
